<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>创建一个函数式组件</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
</head>

<body>
    <!--准备好一个容器-->
    <div id="test"></div>
    <!--引入react核心库,核心库必须先引入-->
    <script type="text/javascript" src="./js/react.development.js"></script>
    <!--引入react-dom, 用于支持react操作DOM-->
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <!--引入babel,用于将jsx转为js-->
    <script type="text/javascript" src="./js/babel.min.js"></script>


    <script type="text/babel">

    //组件实例身上的state状态管理，管理数据的

     //1.创建组件
      class Weather extends React.Component{

        //初始化构造方法
        constructor(props){ //初始化时只调用一次
            super(props) //子组件（类）一旦出现constructor，必须写super
          //  console.log(this) //Weather的实例对象，实例对象上有三大属性，（props,refs,state）
            //初始化状态
            this.state={isHot:true}
            /*bind会生成一个新的函数，新函数的this为bind传入的值 ，
            这里通过bind，生成了新函数demotwo,新函数的this是bind传的Weather实例对象，
            新函数demotwo又绑定在了this身上，所以Weather实例身上会多一个新的函数demotwo*/

            //解决demo()中的this指向问题
            this.demotwo =this.demo.bind(this)
             
        }
        render(){ //调用1+n次，1是初始化的那次，n是状态更新的次数
            //this是组件（类）Weather的实例对象、组件三个属性（props,refs,state）都是在组件的实例对象身上，而不是在组件（类）身上
         //   console.log(this)
            //读取状态

            // return <h1>今天的天气很{this.state.isHot ? '凉爽' : '炎热'}</h1>
            const {isHot} =this.state //解构赋值
            return <h1 onClick ={this.demotwo}>今天的天气很{isHot ? '凉爽' : '炎热'}</h1>
        }
         
        demo(){ //点几次调用几次
        //demo()-- Weather的原型对象上，供实例使用
        //由于demo为作为onClick的回调，所以不是通过实例调用的，是直接调用，
        //类中的方法默认开启了局部的严格模式，所以demo中的this是undefined

         //console.log(this) //undefined

        
        // console.log(this)//Weather实例对象

          //获取原来的值
          const isHot = this.state.isHot 

         //严重注意:状态（state）不可直接更改，下面这行就是直接更改
        // this.state.isHot = !isHot

        //严重注意:状态（state）必须通过setState进行更新,setState是React原型上的方法
         this.setState({isHot:!isHot})

         
        } 

      }

       

    //渲染页面
    ReactDOM.render(<Weather/>,document.getElementById("test"))


      
    </script>




</body>

</html>